<template>

	<view class="page" :style="{ 'min-height': h + 'px', 'padding-top': (mt) + 'px' }">
		<c-nav-bar1 title="订单详情"></c-nav-bar1>
		<view class="bg"></view>
		<view class="content" v-if="item">

			<view class="box top">
				<view class="t_left"><text>{{ ocfg[item.orderState] }}</text></view>
				<!-- <view :class="['t_left', avtiveClass]"><text>{{ ocfg[item.orderState] }}</text></view> -->
				<view class="t_right" @tap="detailsShow = true">
					<view>￥
						<block v-if="item.orderState=='6'||item.orderState=='7'">
							<text>{{ item.isRefundInfoDTO?(item.isRefundInfoDTO.amount||0):0 }}</text>
						</block>
						<block v-else>
							<text>{{ item.realityPay }}</text>
						</block>
					</view>
					<!-- <image src="@/static/my/icon_right.png" mode=""></image> -->
				</view>
			</view>
			<view class="djs" v-if="item.orderState==0&&djsTime">
				<uCountDown text="余票变动频繁剩余支付时间：" color="#ffffff" :fontSize="24" @finish="finish" :djsTime="djsTime" />
			</view>
			<view class="top_tip" v-else>如需提前入住/延迟退房，请联系酒店协商</view>
			<view class="box title">{{ item.jointName }}</view>
			<view class="b_tabs">
				<!-- tab切换 -->
				<view class="tab">
					<view :class="tabIndex === 0 ? 't_active' : ''" @tap="changeTab(0)">
						<text>酒店订单信息</text>
						<image class="limg"
							src="https://i.ringzle.com/file/20231102/f40c902aa7ca4247b7de634641456ddb.png"
							v-if="tabIndex === 1"></image>
					</view>
					<view :class="tabIndex === 1 ? 't_active' : ''" @tap="changeTab(1)">
						<text>船票订单信息</text>
						<image class="rimg"
							src="https://i.ringzle.com/file/20231102/09928587371b43fd92eab6e5f4cf7d7d.png"
							v-if="tabIndex === 0"></image>
					</view>
				</view>
				<!-- 酒店订单信息 -->
				<view class="bt_hotel" v-if="tabIndex === 0">
					<view class="h_name">{{ item.hotelOrderInfo.homestayName }}</view>
					<view class="h_date">
						<view class="hd_view">
							<view class="hdn_top">
								<view class="text">
									{{ item.hotelOrderInfo.ddDate }}<span>({{ item.hotelOrderInfo.inWeek }})</span>
								</view>
							</view>
							<view class="hdn_bottom">
								<view class="text">{{ item.hotelOrderInfo.inTime }}<span>后入住</span></view>
							</view>
						</view>
						<view class="hd_view">
							<view class="hdn_top">
								<view class="text">
									{{ item.hotelOrderInfo.lkDate }}<span>({{ item.hotelOrderInfo.outWeek }})</span>
								</view>
							</view>
							<view class="hdn_bottom">
								<view class="text">{{ item.hotelOrderInfo.outTime }}<span>前离店</span></view>
							</view>
						</view>
						<view class="hd_night">共{{ item.hotelOrderInfo.num }}晚</view>
					</view>
					<view class="h_room">
						<view>{{ item.hotelOrderInfo.houseBaseName }}</view>
						<view v-if="item.hotelOrderInfo.bedData.length ==1"> {{ item.hotelOrderInfo.bedData[0].num }} 张
							{{ item.hotelOrderInfo.bedData[0].size }}|{{item.hotelOrderInfo.bedData[0].category}}|
							{{ item.hotelOrderInfo.area }}m
						</view>
						<view v-else-if="item.hotelOrderInfo.bedData.length > 1">
							{{ item.hotelOrderInfo.bedData[0].num }} 张
							{{ item.hotelOrderInfo.bedData[0].size }}|{{item.hotelOrderInfo.bedData[0].category}}
							{{ item.hotelOrderInfo.bedData[1].num }} 张
							{{ item.hotelOrderInfo.bedData[1].size }}|{{item.hotelOrderInfo.bedData[1].category}}
							|{{ item.hotelOrderInfo.area }}m
						</view>
						<view>
							{{item.hotelOrderInfo.breakfastType==0?'无早':'含早'}}
						</view>
					</view>
				</view>
				<!-- 船票订单信息 -->
				<view class="hb_ship" v-else>
					<view class="s_top">
						<view class="st_left">
							<text>{{ item.isShipOrderListDTO.sailDate }}</text>
							<text>{{ item.isShipOrderListDTO.week }}</text>
						</view>
						<view class="st_right" v-if="item.isShipOrderListDTO.timeMemos">
							<image src="@/static/my/icon_time.png"></image>
							<text>{{ item.isShipOrderListDTO.timeMemos }}</text>
						</view>
					</view>
					<view class="s_middle">
						<view class="sm_left">
							<text>{{ item.isShipOrderListDTO.sailTime }}</text>
							<view class="fromto">
								<image src="@/static/index/steamerTicket/icon_line2.png"></image>
								<view class="fo_addr">
									<text>{{ item.isShipOrderListDTO.startPortName }}</text>
									<text>{{ item.isShipOrderListDTO.endPortName }}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="s_bottom">
						<view>
							<text>{{ item.isShipOrderListDTO.lineNum+''+item.isShipOrderListDTO.sx}}</text>
							<text>{{ item.isShipOrderListDTO.clxm }}</text>
						</view>
						<view>
							<view class="cclp">
								<block v-if="item.isShipOrderListDTO.busStartTime">车船联票：</block><span
									v-if="item.isShipOrderListDTO.busStartTime">开车时间{{
								item.isShipOrderListDTO.busStartTime }}</span>
							</view>
							<text :style="{'margin-left':(item.isShipOrderListDTO.busStartTime?16:0)+'rpx'}"
								v-if="item.isShipOrderListDTO.sailTime">开船时间：{{ item.isShipOrderListDTO.sailTime }}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 联系人信息 -->
			<view class="box contact" v-if="item.orderState == 7">
				<text class="o_title">联系人信息</text>
				<view class="o_item">
					<text class="oi_left">姓名</text>
					<view class="oi_right">
						<text v-if="tabIndex == 0">{{ item.hotelOrderInfo.guestName }}</text>
						<text v-else>{{ item.isShipOrderListDTO.linkPerson }}</text>
					</view>
				</view>
				<view class="o_item">
					<text class="oi_left">手机号码</text>
					<view class="oi_right">
						<text v-if="tabIndex == 0">{{ item.hotelOrderInfo.guestPhone }}</text>
						<text v-else>{{ item.isShipOrderListDTO.linkPhone }}</text>
					</view>
				</view>
				<view class="o_item">
					<text class="oi_left">备注信息</text>
					<view class="oi_right">
						<text v-if="tabIndex == 0">{{ item.hotelOrderInfo.remarks || '' }}</text>
						<text v-else></text>
					</view>
				</view>
			</view>
			<view class="box passenger" v-if="tabIndex === 1">
				<view class="p_top">
					<text>乘客信息</text>
					<text>凭有效证件（必带）直接验证使用</text>
				</view>
				<template v-if="item.isShipOrderListDTO.detailDTOList && person.plateNum">
					<view class="p_middle" v-for="(person, index) in item.isShipOrderListDTO.detailDTOList"
						:key="index">
						<canvas :canvas-id="'qrcode' + index + person.plateNum"
							style=" margin:auto; width:180rpx;height: 180rpx;"></canvas>
						<!-- <view class="sbg">{{ocfg[person.itemState]}} </view> -->
						<view class="sbg"> {{ ocfg[item.orderState] }} </view>

						<view class="pm_content">
							<view class="pm_left">
								<view class="pml_name">
									<text>{{ person.passName }}</text>
									<view class="pmln_type">{{ personTypeCfg[person.priceType] || '' }}</view>
								</view>
								<view class="pml_idcard">{{ personCardCfg[person.credentialType] || '证件号' }}
									{{ person.credentialNum }}
								</view>
								<view class="pml_ship">
									<text>{{ person.seatClassName }}</text>
									<text>序号 {{ person.seatClass }} | 车牌号 {{ person.plateNum }}</text>
								</view>
								<view class="pml_price">￥{{ person.realFee }}</view>
							</view>
							<!-- <view
								v-if="item.isShipOrderListDTO.orderState == 2 || item.isShipOrderListDTO.orderState == 5" -->
							<!-- <view class="pm_right" @tap="showEwm(person.qrCodeBase64)">
									<image class="pmr_ewm" :src="person.qrCodeBase64"></image> -->
							<view
								v-if="item.isShipOrderListDTO.orderState == 2 || item.isShipOrderListDTO.orderState == 5"
								class="pm_right" @tap="showEwm(person.qrCodeBase64)">
								<image class="pmr_ewm" :src="person.qrCodeBase64"></image>
								<image class="pmr_fd" src="@/static/my/icon_fd.png"></image>
							</view>
						</view>
						<view class="p_bottom" @tap="xtShow = true" v-if="person.freeChildCount">
							<text>携童：{{ person.freeChildCount }}</text>
							<image src="@/static/index/steamerTicket/icon_yjt.png"></image>
						</view>
					</view>
				</template>
				<!-- 在这里添加免票儿童 -->
				<template
					v-if="item.isShipOrderListDTO.detailDTOList && item.isShipOrderListDTO.detailDTOList.length > 0">
					<view class="code_list_box" v-for="(person, index) in item.isShipOrderListDTO.detailDTOList"
						:key="index">
						<canvas :canvas-id="'qrcode' + index"
							style=" margin:auto; width:180rpx;height: 180rpx;"></canvas>
						<template v-if="!person.plateNum">
							<view class="p_middle">
								<!-- <view class="sbg">{{ocfg[person.itemState]}}</view> -->
								<view class="sbg"> {{ ocfg[item.orderState] }} </view>
								<view class="pm_content">
									<view class="pm_left">
										<view class="pml_name">
											<text>{{ person.passName }}</text>
											<view class="pmln_type">{{ personTypeCfg[person.priceType] || '' }}</view>
										</view>
										<view class="pml_idcard">{{ personCardCfg[person.credentialType] || '证件号' }} {{ person.credentialNum
											}}
										</view>
										<view class="pml_ship">
											<text>{{ person.seatClassName }}</text>
											<text>序号 {{ person.seatNumber }}号</text>
										</view>
										<view class="pml_price">￥{{ person.realFee }}</view>
									</view>
									<view
										v-if="item.isShipOrderListDTO.orderState == 2 || item.isShipOrderListDTO.orderState == 5"
										class="pm_right" @tap="showEwm(person.qrCodeBase64)">
										<image class="pmr_ewm" :src="person.qrCodeBase64"></image>
										<image class="pmr_fd" src="@/static/my/icon_fd.png"></image>
									</view>
								</view>
							</view>
							<template v-if="person.freeChilInfoList && person.freeChilInfoList.length > 0">
								<view class="p_middle" v-for="cdr in person.freeChilInfoList" :key="cdr.id">
									<view class="sbg"> {{ ocfg[item.orderState] }} </view>
									<view class="pm_content">
										<view class="pm_left">
											<view class="pml_name">
												<text>{{ cdr.childName }}</text>
												<view class="pmln_type">免票儿童</view>
											</view>
											<view class="pml_idcard">{{ personCardCfg[person.credentialType] || '证件号' }}
												{{ cdr.card
												}}
											</view>
											<view class="pml_ship">
												<text>{{ person.seatClassName }}</text>
												<text>序号 {{ person.seatNumber }}号</text>
											</view>
											<view class="pml_price">￥ 0</view>
										</view>
										<!-- <view v-if="item.isShipOrderListDTO.orderState == 2 || item.isShipOrderListDTO.orderState == 5"
											class="pm_right" @tap="showEwm()">
											<image class="pmr_ewm"
												src="https://i.ringzle.com/file/20231025/76755127239b42a4868a911960b5842a.png">
											</image>
											<image class="pmr_fd" src="@/static/my/icon_fd.png"></image>
										</view> -->
									</view>
								</view>
							</template>
							<view class="base_line"></view>
						</template>

					</view>
					<!-- <view class="p_middle" v-for="(person, index) in item.isShipOrderListDTO.detailDTOList" :key="index">
						<view class="sbg"> {{ ocfg[item.orderState] }} </view>
						<view class="pm_content">
							<view class="pm_left">
								<view class="pml_name">
									<text>{{ person.passName }}</text>
									<view class="pmln_type">{{ personTypeCfg[person.priceType] || '' }}</view>
								</view>
								<view class="pml_idcard">{{ personCardCfg[person.credentialType] || '证件号' }} {{ person.credentialNum }}
								</view>
								<view class="pml_ship">
									<text>{{ person.seatClassName }}</text>
									<text>序号 {{ person.seatNumber }}号</text>
								</view>
								<view class="pml_price">￥{{ person.realFee }}</view>
							</view>
							<view v-if="item.isShipOrderListDTO.orderState == 2 || item.isShipOrderListDTO.orderState == 5"
								class="pm_right" @tap="showEwm()">
								<image class="pmr_ewm" src="https://i.ringzle.com/file/20231025/76755127239b42a4868a911960b5842a.png">
								</image>
								<image class="pmr_fd" src="@/static/my/icon_fd.png"></image>
		
							</view>

						</view>
					</view> -->
				</template>
				<view class="p_bottom" v-if="isXt" @tap="xtShow = true">
					<text>携童：{{ item.detailDTOList[0].freeChildCount }}</text>
					<image src="@/static/index/steamerTicket/icon_yjt.png"></image>
				</view>
			</view>
			<!-- 订单信息 -->
			<view class="box order">
				<text class="o_title">订单信息</text>
				<view class="o_item">
					<text class="oi_left">订单编号</text>
					<view class="oi_right">
						<text v-if="tabIndex === 0">{{ item.orderCode }}</text>
						<view v-if="tabIndex === 0" class="oir_copy" @tap="copyNo(item.orderCode)">复制</view>
						<text v-if="tabIndex === 1">{{ item.shipOrderId }}</text>
						<view v-if="tabIndex === 1" class="oir_copy" @tap="copyNo(item.shipOrderId)">复制</view>
					</view>
				</view>
				<view class="o_item">
					<text class="oi_left">下单时间</text>
					<view class="oi_right">
						<text v-if="tabIndex === 0">{{ item.hotelOrderInfo.orderTime }}</text>
						<text v-else>{{ item.isShipOrderListDTO.createTime }}</text>
					</view>
				</view>
				<view class="o_item" v-if="item.orderState < 3">
					<text class="oi_left">联系人</text>
					<view class="oi_right">
						<text v-if="tabIndex === 0">{{ item.hotelOrderInfo.guestName }}</text>
						<text v-else>{{ item.isShipOrderListDTO.linkPerson }}</text>
					</view>
				</view>
				<view class="o_item" v-if="item.orderState < 3">
					<text class="oi_left">联系方式</text>
					<view class="oi_right">
						<text v-if="tabIndex === 0">{{ item.hotelOrderInfo.guestPhone }}</text>
						<text v-else>{{ item.isShipOrderListDTO.linkPhone }}</text>
					</view>
				</view>
				<view class="o_item" v-if="item.orderState < 3">
					<text class="oi_left">备注</text>
					<view class="oi_right">
						<text v-if="tabIndex === 0">{{ item.hotelOrderInfo.remarks || '' }}</text>
						<text v-else></text>
					</view>
				</view>
			</view>
			<!-- 退款信息 -->
			<view class="box order" v-if="item.orderState == 6 || item.orderState == 7">
				<text class="o_title">退款信息</text>
				<view class="o_item">
					<text class="oi_left">退款单号</text>
					<view class="oi_right">
						<text>{{ item.isRefundInfoDTO.id }}</text>
						<view class="oir_copy" @tap="copyNo(item.isRefundInfoDTO.id)">复制</view>
					</view>
				</view>
				<view class="o_item">
					<text class="oi_left">{{ tabIndex == 1 ? '船票金额' : '酒店金额' }}</text>
					<view class="oi_right">
						<text v-if="tabIndex == 0">￥{{ item.hotelOrderInfo.realityPay }}</text>
						<text v-else>￥{{ item.isShipOrderListDTO.totalPayFee }}</text>
					</view>
				</view>
				<view class="o_item">
					<text class="oi_left">退款手续</text>
					<view class="oi_right">
						<!-- <text>￥{{item.refund.fee}}</text> -->
						<text>￥0</text>
					</view>
				</view>
				<view class="o_item">
					<text class="oi_left">退款金额</text>
					<view class="oi_right">
						<text v-if="tabIndex == 0">￥{{ item.hotelOrderInfo.realityPay }}</text>
						<text v-else>￥{{ item.isShipOrderListDTO.totalPayFee }}</text>
					</view>
				</view>
				<view class="o_item">
					<text class="oi_left">退款状态</text>
					<view class="oi_right">
						<text style="color: #FF7D01;" v-if="item.isRefundInfoDTO.refundStatus == 2">退款中</text>
						<text style="color: #007A69;" v-if="item.isRefundInfoDTO.refundStatus == 3">退款成功</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部操作 -->
		<view class="bottom">
			<view class="qx" @tap="cancelOrder" v-if="item.orderState < 1">取消订单</view>
			<view class="qx" @tap="refundTicket" v-if="item.orderState == 1 || item.orderState == 2">退票退款</view>
			<view class="qx" @tap="deleteOrder(item)" v-if="item.orderState == 3 || item.orderState == 4">删除订单</view>
			<view class="qx" @tap="refundDetail" v-if="item.orderState == 6 || item.orderState == 7">退款详情</view>
			<view @tap="immediatePayment" v-if="item.orderState == 0">去支付</view>
			<view @tap="againOrder(item)" v-if="item.orderState > 0">再次预订</view>
		</view>
		<!-- 协童弹窗 -->
		<u-popup :show="xtShow" @close="xtShow = false">
			<view class="xt_details">
				<view class="xtd_title">
					<text>携童信息</text>
					<image src="@/static/index/steamerTicket/icon_close.png" @tap="xtShow = false"></image>
				</view>
				<view class="xd_tip">携童{{ xtList.length }}</view>
				<view class="xt_item" v-for="(item, index) in xtList" :key="index">
					<text class="name">{{ item.name }}</text>
					<text class="idcard">身份证：{{ item.idcard }}</text>
				</view>
			</view>
		</u-popup>
		<!-- 展示凭证二维码 -->
		<view class="ewmup">
			<u-popup :show="codeShow" mode="center" :round="16" @close="codeShow = false">
				<view class="ewm_details">
					<view class="ed_title">
						<text>凭证二维码</text>
						<image src="@/static/index/steamerTicket/icon_close.png" @tap="codeShow = false">
						</image>
					</view>
					<view class="ed_img">
						<image :src="codeImg" mode="widthFix"></image>
					</view>
				</view>
			</u-popup>
		</view>
		<u-toast ref="uToast"></u-toast>

		<!-- 删除弹框 -->
		<u-modal :show="showdelete" :title="title1" :content='contented' showCancelButton="true" confirmText='确定'
			confirmColor='#007A69' @confirm="confirmed" @cancel='cancel'></u-modal>
	</view>
</template>

<script>
	import UQrcode from '@/uqrcode.js'
	var that = this;
	export default {
		name: 'steamerTicketStayOrderDetails',
		data() {
			return {
				h: uni.getWindowInfo().windowHeight - 60,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleStyle: {
					fontSize: '36rpx',
					fontWeight: "bold",
					color: "#FFFFFF"
				},
				id: '',
				item: '',
				ocfg: this.$ocfg,
				week: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
				detailsShow: false,
				tabIndex: 0,
				isXt: false,
				xtShow: false,
				xtList: [{
					name: '周莫深',
					idcard: '3421120021009009'
				}],
				breakfastTypeCfg: {
					0: '无早',
					1: '单早',
					2: '双早',
					3: '含早'
				},
				codeShow: false,
				codeImg: '',
				djsTime: 0,
				showdelete: false,
				orderType: null,
				delId: null,
				title1: '温馨提示',
				contented: '您确定要删除吗？确定删除将不可撤回！',
			}
		},
		onLoad(option) {
			if (option.orderId) {
				this.id = option.orderId;
				this.getDetails();
			}
		},
		methods: {

			qrFun(text, index, plateNum) {
				let canvasId = plateNum ? ('qrcode' + index + plateNum) : ('qrcode' + index);
				UQrcode.make({
					canvasId, //切记canvasId 里边的内容需要跟canvas里边canvas-id="qrcode"的名字一样
					componentInstance: that,
					text: text, //需要转成二维码的内容是后端传过来的，我这里是onLoad传过来的，根                              据自己的需要
					size: 90,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: UQrcode.errorCorrectLevel.H,
					success: res => {
						this.$set(this.item.isShipOrderListDTO.detailDTOList[index], 'qrCodeBase64', res);
					}
				})
			},
			getDetails() {
				this.$api.get('/api/shipHotel/getShipHotelOrderInfo/' + this.id).then(res => {
					if (res.data.code === 0) {
						this.item = res.data.data;
						if (this.item.orderState == 0) {
							let diffMS = Date.parse(new Date(this.item.expireTime)) - Date.parse(new Date());
							if (diffMS > 0) this.djsTime = diffMS;
						}
						// this.item.orderState = "0"
						this.item.hotelOrderInfo.inWeek = this.week[new Date(this.item.hotelOrderInfo.arriveDate)
							.getDay()];
						this.item.hotelOrderInfo.ddDate = new Date(this.item.hotelOrderInfo.arriveDate).Format(
							'MM月dd日');
						this.item.hotelOrderInfo.outWeek = this.week[new Date(this.item.hotelOrderInfo.leaveDate)
							.getDay()];
						this.item.hotelOrderInfo.lkDate = new Date(this.item.hotelOrderInfo.leaveDate).Format(
							'MM月dd日');
						this.item.hotelOrderInfo.inTime = this.item.hotelOrderInfo.arriveDate.split(' ')[this.item
							.hotelOrderInfo.arriveDate.split(' ').length - 1].substr(0, 5);
						this.item.hotelOrderInfo.outTime = this.item.hotelOrderInfo.leaveDate.split(' ')[this.item
							.hotelOrderInfo.leaveDate.split(' ').length - 1].substr(0, 5);

						this.item.isShipOrderListDTO.week = this.week[new Date(this.item.isShipOrderListDTO
							.sailDate).getDay()];
						this.item.isShipOrderListDTO.sailDate = new Date(this.item.isShipOrderListDTO.sailDate)
							.Format('MM月dd日');
						this.item.isShipOrderListDTO.sailTime = this.item.isShipOrderListDTO.sailTime.substr(0, 5);
					} else this.$showModal(res.data.msg)
				})
			},
			changeTab(index) {
				this.tabIndex = index;
				if (this.tabIndex === 1) {
					this.item.isShipOrderListDTO.detailDTOList.forEach((item, index) => {
						this.qrFun((this.item.isShipOrderListDTO.buyTicketType==1?'0':(this.item.isShipOrderListDTO.buyTicketType==2?'2':''))+item.obtainTicketNum, index, item.plateNum);
					})
				}
			},
			copyNo(no) {
				let that = this;
				// #ifdef H5
				this.$copyText(no).then(res => {
					this.$showToast('复制成功');
				})
				// #endif
				// #ifdef MP-WEIXIN
				uni.setClipboardData({
					data: no,
					success(res) {
						that.$showToast('复制成功');
					},
					fail(err) {
						that.$showToast('复制失败');
					}
				})
				// #endif
			},
			cancelOrder() {
				this.$api.get('/api/shipHotel/cancelOrder/' + this.item.orderCode).then(res => {
					if (res.data.code === 0) {
						this.$showToast('订单已取消');
						setTimeout(() => {
							this.djsTime = 0;
							uni.reLaunch({
								url: '/pagesMy/order/index?name=船票+住宿&type=0&typeIndex=3'
							})
						}, 1000)
						// this.getDetails();
					} else this.$showModal(res.data.msg)
				})
			},
			refundTicket() {
				uni.navigateTo({
					url: '/pagesMy/steamerTicketStayOrder/refundTicket?id=' + this.item.id
				})
			},
			immediatePayment() {
				this.$api.get('/api/shipHotel/getShipHotelOrderInfo/' + this.id).then(resu => {
					if (resu.data.code === 0) {
						if (resu.data.orderState == 0) {
							this.$api.post('/order/icbc/createOrder', {
								orderCode: this.item.orderCode,
								tradeType: 'JSAPI',
								openId: JSON.parse(uni.getStorageSync('userInfo')).openId
							}, false).then(res => {
								if (res.statusCode == 200 && res.data != null) {
									this.$wxPay(res.data).then(result => {
										this.$showToast('支付成功');
										uni.reLaunch({
											url: '/pagesMy/order/index?name=船票+住宿&type=0&typeIndex=3'
										})
									})
								}
							})
						}else this.$showToast('不可支付，请返回列表刷新');
					}else this.$showToast(resu.data.msg)
				})
			},
			refundDetail() {
				uni.redirectTo({
					url: '/pagesMy/steamerTicketStayOrder/refundDetails?item=' + JSON.stringify(this.item)
				})
			},
			// 取消
			cancel() {
				this.showAgree = false
				this.showdelete = false
			},
			deleteOrder(item) {

				this.showdelete = true
				this.delId = item.id

			},

			// 确定删除
			confirmed() {
				let id = this.delId

				this.$api.del(`/api/shipHotel/delPersonalOrder/${id}`).then((res) => {
					if (res.data.code == 0) {
						this.showdelete = false
						setTimeout(() => {
							uni.reLaunch({
								url: '/pagesMy/order/index?name=船票+住宿&type=0&typeIndex=3'
							})
							setTimeout(() => {
								this.$showToast('删除成功');
							}, 1000)
						}, 1000)
					} else {
						this.$showModal(res.data.msg);
						this.showdelete = false
					}
				})

			},



			againOrder(item) {
				item.isShipOrderListDTO.detailDTOList.forEach(d => {
					if (d.qrCodeBase64) delete d.qrCodeBase64
				});
				wx.setStorageSync('detailsList', item);
				uni.navigateTo({
					url: '/pagesTrip/packageArea/index'
				})
				// uni.navigateTo({
				// 	url: "/pagesIndex/orderDetails/orderDetails?list=" + JSON.stringify({
				// 		jointName2: item.jointName,
				// 		bottomPrice: item.bottomPrice,
				// 		id: item.id,
				// 		...this.FormData,
				// 		...item
				// 	})
				// })

			},
			showEwm(src) {
				this.codeShow = true;
				this.codeImg = src;
			},
			finish() {
				this.$api.get('/api/shipHotel/cancelOrder/' + this.item.orderCode).then(res => {
					setTimeout(() => {
						this.djsTime = 0;
						uni.reLaunch({
							url: '/pagesMy/order/index?name=船票+住宿&type=0&typeIndex=3'
						})
					}, 1000)
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.base_line {
		width: 100%;
		height: 1px;
		background: #EFEFEF;
		margin-bottom: 30rpx;
	}

	.code_list_box,
	.p_middle {
		position: relative;
		overflow: hidden;

		canvas {
			position: absolute;
			left: -400rpx;
		}
	}

	.code_list_box:last-child {
		.base_line {
			display: none;
		}
	}

	.bg {
		height: 700rpx;
		position: fixed;
		// top: 44px;
		z-index: 1;
		width: 100%;
		background-image: linear-gradient(to bottom, #007A69, #007A69, #F5F8FA);
	}

	.content {
		position: relative;
		z-index: 3;
		padding-bottom: 160rpx;
		padding: 30rpx 24rpx;
		width: 100%;
		box-sizing: border-box;

		.to_be_used {
			color: #333;
		}

		.to_be_paid {
			color: #FEB000;
		}

		.closed {
			color: #999;
		}

		.hand-title {
			position: absolute;
			left: 20rpx;
			top: 100rpx;
			font-size: 24rpx;
			color: #fff;
		}
	}

	.page {
		background: #F5F8FA;
		display: flex;
		align-items: center;
		flex-direction: column;
		padding-bottom: 140rpx;
		box-sizing: border-box;


		.box {
			background: #FFFFFF;
			border-radius: 16rpx;
			position: relative;
		}

		.djs {
			width: calc(100% - 88rpx);
			padding: 0 20rpx;
			margin-bottom: 35rpx;
			position: relative;
			margin-top: 20rpx;
		}

		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: transparent;
			padding: 40rpx 0 0 16rpx;

			.t_left {
				text {
					font-size: 44rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
				}
			}

			.t_right {
				display: flex;
				align-items: center;

				view {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;

					text {
						font-size: 44rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						margin-left: 4rpx;
					}
				}

				image {
					width: 24rpx;
					height: 24rpx;
					margin-left: 10rpx;
				}
			}
		}

		.top_tip {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			padding: 20rpx 0 0 16rpx;
			z-index: 1;
		}

		.title {
			padding: 36rpx 24rpx;
			margin-top: 30rpx;
			font-size: 32rpx;
			font-family: PingFang-SC-Bold, PingFang-SC;
			font-weight: bold;
			color: #333333;
			line-height: 42rpx;
		}

		.b_tabs {
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-top: 20rpx;
			z-index: 2;

			.tab {
				width: 100%;
				height: 96rpx;
				background: #fff;
				border-top-left-radius: 16rpx;
				border-top-right-radius: 16rpx;
				display: flex;
				align-items: center;

				&>view {
					width: 50%;
					height: 96rpx;
					text-align: center;
					line-height: 96rpx;
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #535C65;
					position: relative;

					&.t_active {
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #111111;
					}

					&.t_active::after {
						content: '';
						position: absolute;
						width: 80rpx;
						height: 6rpx;
						background: #007A69;
						border-radius: 2rpx;
						left: 50%;
						margin-left: -40rpx;
						bottom: 0;
						z-index: 1;
					}

					text {
						position: relative;
						z-index: 2;
					}

					image {
						width: 100%;
						height: 100%;
						position: absolute;
						bottom: 0;
						z-index: 0;

						&.limg {
							left: 0;
						}

						&.rimg {
							right: 0;
						}
					}
				}
			}

			.bt_hotel {
				padding: 40rpx 24rpx;
				background: #fff;
				border-bottom-left-radius: 16rpx;
				border-bottom-right-radius: 16rpx;

				.h_name {
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}

				.h_date {
					padding: 48rpx 0 38rpx;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.hd_view {
						width: calc(50% - 84rpx);

						.hdn_top {
							.text {
								display: flex;
								align-items: center;
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #999999;

								span {
									margin-left: 24rpx;
								}
							}
						}

						.hdn_bottom {
							margin-top: 22rpx;

							.text {
								display: flex;
								align-items: center;
								font-size: 32rpx;
								font-family: PingFang-SC-Bold, PingFang-SC;
								font-weight: bold;
								color: #333333;

								span {
									font-size: 24rpx;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									color: #111111;
									margin-left: 24rpx;
								}
							}
						}
					}

					.hd_night {
						width: 96rpx;
						height: 36rpx;
						border-radius: 18rpx;
						border: 1rpx solid #EFEFEF;
						line-height: 36rpx;
						text-align: center;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #111111;
						position: absolute;
						left: 50%;
						margin-left: -48rpx;
						bottom: 40rpx;
					}
				}

				.h_room {
					border-top: 1rpx solid #EFEFEF;
					padding-top: 20rpx;
					display: flex;
					flex-direction: column;

					view {
						padding-top: 20rpx;
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;

						&:first-child {
							font-size: 28rpx;
							color: #111111;
						}
					}
				}
			}

			.hb_ship {
				padding: 40rpx 24rpx;
				background: #fff;
				border-bottom-left-radius: 16rpx;
				border-bottom-right-radius: 16rpx;

				.s_top {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.st_left {
						text {
							font-size: 30rpx;
							font-family: PingFang-SC-Bold, PingFang-SC;
							font-weight: bold;
							color: #111111;

							&:last-child {
								margin-left: 16rpx;
							}
						}
					}

					.st_right {
						display: flex;
						align-items: center;

						image {
							width: 28rpx;
							height: 28rpx;
						}

						text {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							margin-left: 16rpx;
						}
					}
				}

				.s_middle {
					margin-top: 28rpx;
					display: flex;
					justify-content: space-between;
					padding-bottom: 30rpx;

					.sm_left {
						display: flex;

						&>text {
							font-size: 40rpx;
							font-family: PingFang-SC-Bold, PingFang-SC;
							font-weight: bold;
							color: #333333;
						}

						.fromto {
							display: flex;
							align-items: center;
							margin-left: 40rpx;

							&>image {
								width: 8rpx;
								height: 68rpx;
							}

							.fo_addr {
								margin-left: 20rpx;
								display: flex;
								flex-direction: column;

								text {
									font-size: 30rpx;
									font-family: PingFang-SC-Bold, PingFang-SC;
									font-weight: bold;
									color: #333333;

									&:last-child {
										margin-top: 30rpx;
									}
								}
							}
						}
					}

					.sm_img {
						width: 178rpx;
						height: 128rpx;
						position: relative;

						image {
							width: 100%;
							height: 100%;
						}

						text {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #5778A8;
							position: absolute;
							right: 24rpx;
							bottom: 31rpx;
						}
					}
				}

				.s_bottom {
					border-top: 1rpx solid #EFEFEF;
					padding-top: 24rpx;

					&>view {
						display: flex;
						align-items: center;
						margin-top: 16rpx;

						&:first-child {
							margin-top: 0;
						}

						text,
						.cclp {
							display: flex;
							align-items: center;
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #777777;
							margin-left: 16rpx;

							&:first-child {
								margin-left: 0;
							}
						}
					}
				}
			}
		}

		.order,
		.contact {
			padding: 40rpx 24rpx;
			margin-top: 20rpx;

			.o_title {
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}

			.o_item {
				margin-top: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.oi_left {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}

				.oi_right {
					display: flex;
					align-items: center;

					text {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}

					.oir_copy {
						width: 78rpx;
						height: 36rpx;
						border-radius: 18rpx;
						border: 1rpx solid #007A69;
						line-height: 36rpx;
						text-align: center;
						font-size: 22rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #007A69;
						margin-left: 37rpx;
					}
				}
			}
		}

		.passenger {
			padding: 40rpx 24rpx;
			margin-top: 20rpx;

			.p_top {
				display: flex;
				align-items: center;

				text {
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #111111;

					&:last-child {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FF7D01;
						margin-left: 20rpx;
					}
				}
			}

			.p_middle {
				position: relative;
				box-shadow: 0rpx 0rpx 10rpx 2rpx rgba(0, 0, 0, 0.06);
				padding: 36rpx 12rpx 26rpx 20rpx;
				margin-top: 32rpx;

				.sbg {
					position: absolute;
					right: 0;
					top: 0;
					height: 40rpx;
					background: #FFEEDD;
					line-height: 40rpx;
					text-align: center;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FF7D01;
					padding: 0 10rpx;
				}

				.pm_content {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.pm_left {
						.pml_name {
							display: flex;
							align-items: center;

							&>text {
								font-size: 30rpx;
								font-family: PingFang-SC-Bold, PingFang-SC;
								font-weight: bold;
								color: #333333;
							}

							.pmln_type {
								min-width: 88rpx;
								height: 36rpx;
								background: #F5F8FA;
								border-radius: 8rpx;
								line-height: 36rpx;
								text-align: center;
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #94A9C8;
								margin-left: 15rpx;
							}
						}

						.pml_idcard {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
							margin-top: 16rpx;
						}

						.pml_ship {
							display: flex;
							align-items: center;
							margin-top: 36rpx;

							text {
								font-size: 28rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #666666;
								margin-left: 16rpx;

								&:first-child {
									margin-left: 0;
								}
							}
						}

						.pml_price {
							margin-top: 24rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
					}

					.pm_right {
						width: 180rpx;
						height: 180rpx;
						position: relative;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							position: absolute;
						}

						.pmr_ewm {
							width: 100%;
							height: 100%;
							z-index: 1;
						}

						.pmr_fd {
							width: 46rpx;
							height: 46rpx;
							z-index: 2;
						}
					}
				}
			}

			.p_bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 26rpx;

				text {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}

				image {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}

		.xt_details {
			padding: 40rpx 30rpx 200rpx;

			.xtd_title {
				position: relative;
				text-align: center;

				text {
					font-size: 36rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}

				image {
					width: 36rpx;
					height: 36rpx;
					position: absolute;
					right: 10rpx;
					top: 50%;
					margin-top: -18rpx;
				}
			}

			.xd_tip {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				padding-top: 58rpx;
			}

			.xt_item {
				display: flex;
				flex-direction: column;
				margin-top: 24rpx;

				.name {
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}

				.idcard {
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #777777;
					margin-top: 20rpx;
				}
			}
		}

		.bottom {
			width: calc(100% - 80rpx);
			position: fixed;
			bottom: 0;
			padding: 21rpx 40rpx;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			z-index: 9;

			&>view {
				width: calc(50% - 15rpx);
				height: 80rpx;
				border-radius: 46rpx;
				// border: 1rpx solid #007A69;
				background-color: #007A69;
				line-height: 80rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				// color: #007A69;
				color: #FFFFFF;

				&.qx {
					// border: 1rpx solid #CCCCCC;
					background-color: #F6F6F6;
					color: #111111;
				}
			}
		}

		.ewm_details {
			.ed_title {
				width: 100%;
				height: 110rpx;
				background: #F5F8FA;
				border-radius: 16rpx 16rpx 0rpx 0rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;

				text {
					font-size: 36rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}

				image {
					width: 36rpx;
					height: 36rpx;
					position: absolute;
					right: 36rpx;
					top: 50%;
					margin-top: -18rpx;
				}
			}

			.ed_img {
				padding: 40rpx 0;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 480rpx;
					height: 480rpx;
				}
			}
		}

		.ewmup {
			/deep/.u-popup__content {
				width: calc(100% - 48rpx);
			}
		}
	}
</style>